import { useState } from "react"
import useWatch from "../../../Hook/useWatch"
import { Button } from '@mui/material'

const NestPageHome = () => {
  const [name, setName] = useState('hdd')
  const [userInfo, setUserInfo] = useState({
    name: 'hdd',
    age: 27
  })
  const saveNewValue = () => {
    setName('hdd2' + new Date().getTime().toString())
    setUserInfo({
      ...userInfo,
      age: userInfo.age + 1
    })
  }
  useWatch(name, (newValue, oldValue) => {
    console.log(newValue, oldValue, 'name')
  })
  useWatch(userInfo, (newValue, oldValue) => {
    console.log(newValue, oldValue, 'userInfo')
  })
  return (
    <div style={{width: '100%', height: '100%'}}>
      二级路由嵌套
      <div>
        <p>测试watch监听</p>
        <p>{name}</p>
        <p>对象中的年龄：</p>
        <p>{userInfo.age}</p>
        <p>请在F12控制台中查看打印信息</p>
        <p>测试iconfont：<i className="iconfont icon-caidanlanshouye"></i></p>
      </div>
      <div>
        <Button onClick={() => saveNewValue()}>点击修改测试</Button>
      </div>
    </div>
  )
}

export default NestPageHome